<template>
	<view class="box">
		<form @submit="formSubmit">
			<view class="uni-form-item">
				<!-- name为表单提交所需要的key -->
				<input name="true_name" type="text" placeholder="收货人" :value="addressInfo.true_name" />
			</view>
			<view class="uni-form-item">
				<input name="mod_phone" type="text" placeholder="手机号码" :value="addressInfo.mod_phone" />
			</view>
			<view class="uni-form-item">
				<input name="region_value" type="text" :value='addressInfo.region_value' placeholder="省市区" @click="showMulLinkageTwoPicker" />
			</view>
			<view class="uni-form-item">
				<input name="address" type="text" placeholder="详细地址" :value="addressInfo.address" />
			</view>
			<view class="uni-form-item">
				<input name="zip_code" type="text" placeholder="邮政编码" :value="addressInfo.zip_code" />
			</view>
			<view class="uni-form-item" style="display: flex;justify-content: space-between;">
				<text>设为默认地址</text>
				<switch checked @change="switch1Change" />
			</view>
			<view class="btn-area" v-if="is_add==1">
				<button formType="submit" type="primary" >添加收货地址</button>
			</view>
			<view class="btn-area" v-else>
				<button formType="submit" type="primary" >编辑收货地址</button>
			</view>
		</form>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../common/city.data.js';
	var graceChecker = require("../../common/graceChecker.js");
	import {
		saveAddress
	} from '../../common/api.js'
	import {
		showError,
		showSuccess
	} from '../../common/fast.js'
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			return {
				is_add: 1, //1添加页面，0编辑页面
				addressInfo: {}, //收货地址信息
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray: []
			}
		},
		methods: {
			formSubmit(e) {
				var rule = [{
						name: "true_name",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请填写收货人"
					},
					{
						name: "mod_phone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请输入11位手机号码"
					},
					{
						name: "region_value",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入地区"
					},
					{
						name: "address",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入详细地址"
					},
					{
						name: "zip_code",
						checkType: "zipcode",
						checkRule: "",
						errorMsg: "请输入6位邮政编码"
					},

				]
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					let user_token = this.$store.state.userInfo.user_token
					// 不在formData里面
					let region_id = this.addressInfo.region_id
					let address_id = this.addressInfo.address_id
					this.addressInfo = formData
					this.addressInfo.region_id = region_id
					this.addressInfo.address_id = address_id
					if( this.is_add ==1 ){
						this.addressInfo.address_id = ''
					}
					let o = this.addressInfo
					let reqData = {
						user_token: user_token,
						address_id: o.address_id,
						true_name: o.true_name,
						region_id: o.region_id,
						region_value: o.region_value,
						address: o.address,
						zip_code: o.zip_code,
						mod_phone: o.mod_phone
					}
					console.log(reqData)
					saveAddress(reqData).then( res => {
						console.log(res.data)
					})
					console.log(this.$store.state.userInfo)
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为' + e.detail.value)
			},
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			onConfirm(e) {
				console.log(e)
				this.addressInfo.region_value = e.label
				this.addressInfo.region_id = e.value[1]
			},
			onCancel(e) {
				console.log(e)
			},
			onBackPress() {
				if (this.$refs.mpvuePicker.showPicker) {
					this.$refs.mpvuePicker.pickerCancel();
					return true;
				}
				if (this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel();
					return true;
				}
			},
			onUnload() {
				if (this.$refs.mpvuePicker.showPicker) {
					this.$refs.mpvuePicker.pickerCancel()
				}
				if (this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel()
				}
			},
		},
		onLoad(option) {
			if (option.addressInfo) {
				uni.setNavigationBarTitle({
					title: '编辑收货地址'
				});
				this.addressInfo = JSON.parse(option.addressInfo)
				this.is_add = 0
				console.log('编辑页面')
			} else {
				console.log('添加页面')
			}
		},
		onShow() {}
	}
</script>

<style>
	@import "../../common/uni.css";
	.box {
		padding: 30px 15px 0px;
	}

	.uni-form-item {
		padding: 10upx 0 10upx 20upx;
		margin-bottom: 20upx;
		background-color: #F9F9F9;
	}

	.btn-area button {
		margin-bottom: 20upx;
	}
</style>
